<template>
    <el-scrollbar class="code-container" always>
        <highlight :language="language" :code="code"/>
    </el-scrollbar>
</template>

<script>
import hljs from 'highlight.js/lib/core';
import hljsJava from 'highlight.js/lib/languages/java';
import hljsSql from 'highlight.js/lib/languages/sql';
import hljsXml from 'highlight.js/lib/languages/xml';
import hljsVuePlugin from '@highlightjs/vue-plugin';

hljs.registerLanguage('java', hljsJava);
hljs.registerLanguage('sql', hljsSql);
hljs.registerLanguage('xml', hljsXml);

export default {
    name: 'CodePreview',
    components: {
        highlight: hljsVuePlugin.component,
    },
    props: {
        code: String,
        language: {
            type: String,
            default: 'java',
        },
    },
    data() {
        return {};
    },
    methods: {}
}
</script>

<style lang="scss">
.code-container {
    border: 1px solid var(--el-border-color);
    flex-grow: 1;
    height: 500px;

    pre {
        margin: 0;
    }
}
</style>
